import React, { Component } from 'react'
import { Button, Card, DatePicker, Form, message, Table, Tabs } from 'antd'
import moment from 'moment'
import { fetchPost } from '../../../utils/request'
import { origin } from '../../../utils/config'

const FormItem = Form.Item
const { RangePicker } = DatePicker
const { TabPane } = Tabs

class EfficiencyStatistics extends Component {

  constructor (props) {
    super(props)
    this.state = {
      list: [],
      key: 'team',
      loading: true,
      startDate: moment().subtract('days', 6).format('YYYY-MM-DD'),
      endDate: moment().add('days', 0).format('YYYY-MM-DD'),
    }
  }

  componentDidMount () {
    this.getEfficiencyStatistics()
  }

  handelDateChange = (date, dateString) => {
    console.log('dateString: ' + dateString)
    this.setState(
      {
        startDate: dateString[0],
        endDate: dateString[1]
      })
  }

  handleTabsChange = (activeKey) => {
    console.log('activeKey: ' + activeKey)
    this.setState(
      {
        key: activeKey,
        list: [],
        loading: true
      },
      () => {
        this.getEfficiencyStatistics()
      }
    )
  }

  handleSearch = () => {
    this.setState(
      { loading: true },
      () => this.getEfficiencyStatistics()
    )

  }

  handleExport = () => {
    const { startDate, endDate, key } = this.state
    let url = `${origin}/collection/efficiency/statistics/export/${key}?startDate=${startDate}&endDate=${endDate}`
    window.open(url)
    message.info('downing....')
  }

  getEfficiencyStatistics = () => {

    const { startDate, endDate, key } = this.state
    const URL = `/collection/efficiency/statistics/${key}`
    const params = { startDate, endDate }
    fetchPost(URL, params).then(response => {
      if (response.code === 0 && response.data.list.size !== 0) {
        this.setState({
          list: response.data.list,
          loading: false
        })
      } else {
        this.setState({
          list: [],
          loading: false
        }, () => {
          message.info('No date')
        })
      }
    })
  }

  render () {

    const dateFormat = 'YYYY-MM-DD'
    const { getFieldDecorator } = this.props.form
    const formItemLayout = {
      labelCol: {
        sm: { span: 4 },
      },
      wrapperCol: {
        sm: { span: 16 },
      },
    }
    const { startDate, endDate, list, key } = this.state
    const rangeConfig = {
      rules: [{ type: 'array', message: 'Please select Time!' }],
      initialValue: [moment(startDate, dateFormat), moment(endDate, dateFormat)]
    }
    const teamColumns = [
      {
        title: 'Collection Stage',
        dataIndex: 'stage',
        key: 'stage'
      }, {
        title: 'New Order',
        dataIndex: 'newOrders',
        key: 'newOrders'
      }, {
        title: 'Collection Order',
        dataIndex: 'collectionOrders',
        key: 'collectionOrders'
      }, {
        title: 'Collection Rate',
        dataIndex: 'collectionRate',
        key: 'collectionRate'
      },{
        title: 'Total Orders',
        dataIndex: 'totalOrders',
        key: 'totalOrders'
      }, {
        title: 'Total Collection Orders',
        dataIndex: 'totalCollectionOrders',
        key: 'totalCollectionOrders'
      }, {
        title: 'Total Collection Rate',
        dataIndex: 'totalCollectionRate',
        key: 'totalCollectionRate'
      },
    ]
    const personColumns = [
      {
        title: 'ID',
        dataIndex: 'id',
        key: 'id'
      }, {
        title: 'Collection Auditor',
        dataIndex: 'collectionAuditor',
        key: 'collectionAuditor'
      }, {
        title: 'Stage',
        dataIndex: 'stage',
        key: 'stage'
      }, {
        title: 'New Orders',
        dataIndex: 'newOrders',
        key: 'newOrders'
      }, {
        title: 'Collection Orders',
        dataIndex: 'collectionOrders',
        key: 'collectionOrders'
      }, {
        title: 'Collection Rate',
        dataIndex: 'collectionRate',
        key: 'collectionRate'
      }, {
        title: 'Total Orders',
        dataIndex: 'totalOrders',
        key: 'totalOrders'
      }, {
        title: 'Total Collection Orders',
        dataIndex: 'totalCollectionOrders',
        key: 'totalCollectionOrders'
      }, {
        title: 'Total Collection Rate',
        dataIndex: 'totalCollectionRate',
        key: 'totalCollectionRate'
      }, {
        title: 'Total Collection Amount',
        dataIndex: 'totalCollectionAmount',
        key: 'totalCollectionAmount'
      }, {
        title: 'Total Point',
        dataIndex: 'totalPoint',
        key: 'totalPoint'
      }
    ]

    return (
      <div>

        <Card>
          <Form layout="inline">
            <FormItem {...formItemLayout} label="Date">
              {getFieldDecorator('range-picker', rangeConfig)(
                <RangePicker onChange={this.handelDateChange}/>
              )}
            </FormItem>

            <FormItem {...formItemLayout}>
              <Button type="primary" onClick={this.handleSearch}>Search</Button>
            </FormItem>

            <FormItem {...formItemLayout}>
              <Button type="primary" onClick={this.handleExport}>Export</Button>
            </FormItem>
          </Form>
        </Card>

        <Card>
          <Tabs type="card" className={'mt20'} onChange={this.handleTabsChange} activeKey={key}>
            <TabPane tab="Team Efficiency" key="team">
              <Table columns={teamColumns}
                     dataSource={list}
                     key='id'
                     pagination={false}
                     loading={this.state.loading}
                     bordered/>
            </TabPane>
            <TabPane tab="Person Efficiency" key="person">
              <Table columns={personColumns}
                     dataSource={list}
                     key='id'
                     size='small'
                     pagination={false}
                     loading={this.state.loading}
                     bordered/>
            </TabPane>
          </Tabs>
        </Card>

      </div>
    )

  }

}

EfficiencyStatistics = Form.create()(EfficiencyStatistics)
export default EfficiencyStatistics
